<template>
    <view>
   
   <!-- 视频界面开始 -->
   <view class="content_box">
       <image class="img_boss" mode="aspectFill" :src="list.img"></image>
       
           <!-- 工具栏开始 -->
           <view class="video_icon">
                 <view class="iconfont icon-forward-null">
                     <button open-type="share"></button>
                 </view>
               <view @click="btn"  :class="['iconfont',muted?'icon-jingyin':'icon-tubiao1yinliang ']"></view>
             
           </view>
            <!-- 工具栏结束 -->
            <!-- 视频区域开始 -->
            <view class="video_open">
                <video :muted="muted" :src="list.video"></video>
            </view>
             <!-- 视频区域结束 -->
            <!-- 下载按钮开始 -->
            <view class="video_btn">
              <view class="video_bottom" @click="handledown">
                   下载视频
              </view>
            </view>
            <!-- 下载按钮结束 -->
   </view>
   <!-- 视频界面结束 -->
    </view>
</template>

<script>
export default {
    data(){
        return{
            list:{},
            muted:false
        }
    },
    onLoad(){
        // console.log("传递出这",getApp().globalData.video)
        this.list=getApp().globalData.video
    },
  methods:{
        btn(){
        this.muted=!this.muted
    },
   async handledown(){
       await uni.showLoading({
           title:"下载中"
       })
    //    1.将远程文件 下载到小程序当中
       const {tempFilePath} = (
           await uni.downloadFile({url:this.list.video})
       )[1];
    //    将内存中的文件 下载到本地上
      await uni.saveVideoToPhotosAlbum({
          filePath:tempFilePath
      })

      await uni.showToast({
          title:"下载完成",
          icon:"none"
      })
    }
  }

}
</script>


<style lang="scss" scoped>
   .content_box{
       position: relative;
       .img_boss{
           width: 100vw;
           height:100vh;
           filter: blur(30rpx);
       }
       .video_icon{
         width:100vw;
         position: absolute;
         top:0;
         left:0;
         display:flex;
         flex-direction:row-reverse;
         padding:20rpx;
         .iconfont{
             margin:0 10rpx;
            width:75rpx;
            height:75rpx;
            display:flex;
            justify-content: center;
            align-items:center;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.8);
            color:white;
            position: relative;
            button{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                opacity: 0;
                z-index: 99;
            }
         }
       }
       .video_open{
           position: absolute;
           top:125rpx;
           left:0;
           width:100vw;
           display:flex;
           justify-content: center;
           video{
               width:320rpx;
               height:600rpx;
           }
       }
       .video_btn{
           position: absolute;
           left:0;
           bottom:25%;
           width:100vw;
           display: flex;
           justify-content: center;
         .video_bottom{
            width:50%;
            padding:20rpx;
            border-radius: 60rpx;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            color:white;
            font-size:36rpx;
         }
       }
   } 
 
</style>